@push('title')
    <title>天气列表</title>
@endpush
@push('style2')
<style>

    .layui-table-cell{
        height: auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-break: break-all;
    }
</style>
@endpush
@extends('layout.layer')
@section('content')

    <form class="layui-form layui-form-pane1" action="" lay-filter="first" style="margin-bottom: 15px">

        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <label class="layui-form-label">航线ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" maxlength="50" placeholder="航线ID" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">航司编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="airline" maxlength="50" placeholder="航司编号" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">起飞</label>
                <div class="layui-input-inline">
                    <input type="text" name="depart_code" maxlength="3" placeholder="三字码" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">到达</label>
                <div class="layui-input-inline">
                    <input type="text" name="arrived_code" maxlength="3" placeholder="三字码" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="search-btn" lay-submit lay-filter="*">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>

    <table id="test2" lay-filter="test2"></table>
@endsection
@push('script')
    <script src="/static/xml-select/xm-select.js"></script>
    <script>
        layui.use(['table','form','laydate'], function() {
            var $ = layui.$
                ,table = layui.table
                ,form = layui.form
                ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#start_at'
                ,type: 'date'
            });


            var airline = xmSelect.render({
                el: '#order_field',
                language: 'zn',
                name: 'order_field',
                theme: {
                    color: '#666', // 设置主题颜色
                },
                data: [
                    {name: '起飞准点率（降）', value: 'depOntimeRate/1'},
                    {name: '到达准点率（降）', value: 'arrOntimeRate/1'},
                    {name: '航班取消率（升）', value: 'cancelRate/0'},
                    {name: '航班调时率（升）', value: 'depOntimeRate/0'},
                ]
            });

            const week = ['日', '一', '二', '三', '四', '五', '六'];


            /**
             * 日历
             * @param data
             * @returns {string}
             */
            function calendarTable(data,flightLineItem) {

                var calendarTableStr = '<form class="layui-form layui-form-pane1" action="" lay-filter="flight-'+flightLineItem.depart_code+flightLineItem.arrived_code+flightLineItem.flight_code+'">' +
                    '<table style="border: 1px solid #1e9fff;">';
                calendarTableStr += '<tr style="border: 1px solid #1e9fff;">';

                week.forEach(function (wItem,wIndex){
                    calendarTableStr += '<th style="width: 330px;text-align: center;border: 1px solid #1e9fff;">'+wItem+'</th>';

                })
                calendarTableStr += '</tr>';

                var dataIndex = 0;

                while (true) {

                    calendarTableStr += '<tr style="border: 1px solid #1e9fff;">';

                    week.forEach(function (wItem,wIndex){

                        var tdAble = true;

                        for(var i= dataIndex; i < data.length; i++) {


                            var date = new Date(data[i].date);
                            var dayIndex = date.getDay();console.log(dayIndex);

                            if (wIndex == dayIndex ) {

                                tdAble = false;
                                calendarTableStr += '<td style="width: 330px;height:80px;text-align: center;border-color: #1e9fff;">' +
                                    '<span><span style="font-size: 14px;font-weight: bold;"> '+data[i].date+ '<br><img width="50" height="50" src="/static/images/weather/'+data[i].img_url+ '"/><br>'+data[i].temperature+ '<br>'+data[i].weather+'</span></span></td>';

                                dataIndex++;
                            }

                            break;
                        }

                        if (tdAble) {

                            calendarTableStr += '<td style="width: 330px;text-align: center;border-color: #1e9fff"></td>';
                        }

                    });

                    calendarTableStr += '</tr>';

                    if (dataIndex >= data.length-1 ) {

                        break;
                    }
                }

                calendarTableStr += '</table></form>';

                return calendarTableStr;
            }

            var statistic = function (divId,flight) {

                $.ajax({
                    url: '/weather/ajaxLists?depart_code='+flight.depart_code+'&arrived_code='+flight.arrived_code
                    , method: 'get'
                    , dataType: 'json'
                    , async: false
                    , success: function (data) {

                        data = data.data;

                        $('#'+divId+'-1').html(calendarTable(data.depart_city_weather,flight));

                        $('#'+divId+'-2').html(calendarTable(data.arrived_city_weather,flight));
                    }
                });
            }


            table.render({
                id: 'test2'
                ,elem: '#test2'
                ,url: '/flight/ajaxLists'
                ,page: { //详细参数可参考 laypage 组件文档
                    curr: 1
                    ,groups: 20
                    ,first: false
                    ,last: false
                    ,layout: ['limit', 'prev', 'page', 'next', 'count','refresh', 'skip'] //自定义分页布局
                }
                //,height: 300
                ,cellMinWidth: 80
                ,limit : 10
                ,limits: [5,10,30,50]
                //,skin: 'line'
                ,toolbar: false
                ,done: function(res, curr, count){

                    // 表格数据渲染完毕后的回调
                    // 假设我们要在第二行后面添加一行
                    res.data.forEach(function (item, index) {

                        var tr = $(".layui-table").find("tbody tr[data-index='" + index + "']");

                        //设置颜色
                        tr.css("background-color", "#1976d2");
                        tr.css("color", "#FFFFFF");
                        // 给1-0-9列添加样式
                        tr.find(".laytable-cell-1-0-9").css("color","red");


                        var tr = $(".layui-table").find("tbody tr[data-index='" + index + "']");

                        tr.after('<tr> <td colspan="19" style="background-color: #1e9fff;"><div id="calendar-flightLine-'+index+'-1" style="background-color:#ffffff;min-height:300px;width: 49%;float: left;margin-right: 17px;"></div><div id="calendar-flightLine-'+index+'-2" style="background-color:#ffffff;margin-left:15px;min-height:300px;width: 49%;float: left"></div></td></tr>');


                        statistic('calendar-flightLine-'+index,item);
                    });

                }
                ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    tableData =  res.data

                    return {
                        "code": res.errcode, //解析接口状态
                        "msg": res.errmsg, //解析提示文本
                        "count": res.meta.total, //解析数据长度
                        "data":res.data,
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'page_size' //每页数据量的参数名，默认：limit
                }
                ,cols: [[
                    {field: 'id', 'title':'ID',width:50}
                    ,{field: 'airline', 'title':'航司'}
                    ,{field: 'depart_code', 'title':'起飞'}
                    ,{field: 'arrived_code', 'title':'到达'}
                    ,{field: 'flight_code', 'title':'航班'}
                    /*,{field: 'day', 'title':'查询天数'}*/
                ]]

            });



            //监听提交
            form.on('submit(*)', function(data){

                table.reload('test2',{
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where:data.field
                });

                return false;
            });

            var jsonToParams = function (json) {
                var params = Object.keys(json).map(function(key) {
                    return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
                }).join('&');
                return params;
            }

            $('#dynamic-download').on('click',function () {


                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/download?'+paramStr;
            });

            $('#seven-download').on('click',function () {
                
                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/downloadSevenData?'+paramStr;
            })

            $('#weather-download').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);
                window.location.href = '/weather/download?'+paramStr;
            })
        });
    </script>

@endpush